let list = document.querySelectorAll(".list");
let main = document.querySelector(".main");
for (let i = 0; i < list.length; i++) {
  list[i].addEventListener("click", () => {
    main.style.left = i * -100 + "%";
    // 点击第一个的时候i是0，又因为在if判断里面0为false,所以当i为1或2的时候触发背景渐变
    // 再在判断里加一层三目表达式，分别判断i等等于1和i等等于2时的背景色
    if (i) {
      i == 1
        ? (document.body.style.backgroundColor = "#4070f4")
        : (document.body.style.backgroundColor = "#4070f4");
    } else {
      // 如果都不满足就说明i是0了，i是0时变回原来的背景色
      document.body.style.backgroundColor = "#4070f4";
    }
  });
}
